<template>
  <page-main>
    <div class="map" id="coordinates" ref="basicMapbox" style="height:500px;"></div>
  </page-main>

</template>
<script>
import mapboxgl from 'mapbox-gl';
export default {
  name: "home",
  data() {
    return {
     
    };
  },
  methods:{
    init () {
        mapboxgl.accessToken = 'pk.eyJ1Ijoic25zcXNzIiwiYSI6ImNrZ2oxbWtqMTAzNnAyeXFwMDAzdmp2YTAifQ.AuaHmI9j-_VbOYxUSJACQw' // 申请的key
        var coordinates = document.getElementById('coordinates');
        // debugger
        const map = new mapboxgl.Map({
          container: this.$refs.basicMapbox,
          style: 'mapbox://styles/mapbox/streets-v9',
          // center: [145.12031, -37.81844], // 设置地图中心
          // center: [110.354677,21.271699],
          center: [12.550343, 55.665957],
          zoom: 8,  // 设置地图比例
          // color: "#FFFFFF",
          // draggable: true
        })
        
        // 使用定位模块
        map.addControl(new mapboxgl.GeolocateControl({
            positionOptions: {
                enableHighAccuracy: true
            },
            trackUserLocation: true,
            showUserLocation: true,
            zoom: 14,
        }))
        
        // 建立一个标记点
        var marker = new mapboxgl.Marker({
            draggable: true,
            color:'red',
            scale:1
        });
        new mapboxgl.Marker().setLngLat([12.554729, 55.70651]).addTo(map);
        function onDragEnd() {
            var lngLat = marker.getLngLat();
            coordinates.style.display = 'block';
            coordinates.innerHTML = 'Longitude: ' + lngLat.lng + '<br />Latitude: ' + lngLat.lat;
        }
        marker.on('dragend', onDragEnd);

        // 点击获取经纬度模块&点击标记点
        map.on('click', function (e) {
            marker.setLngLat([e.lngLat.lng,e.lngLat.lat]).addTo(map)
        })
        map.addControl(new mapboxgl.MapboxGeocoder({
            accessToken: mapboxgl.accessToken
        }));
        
    }
  },
  mounted() {
    this.init()
  },
}
</script>
